This tutorial discusses how to implement user login and logout functionality using Vue.js and Spring Boot Security. The primary purpose of this article is to guide developers through creating a secure login system using Spring Boot and Vue.js. We will implement a demo application to showcase how the login and logout functionalities work together.

In this article, we are modifying the application developed for Vuejs and Spring Boot CRUD example by adding login/logout functionality.

To follow this tutorial, we should have a basic understanding of the following:

To configure Spring Boot Security, we need to add the following Maven dependencies to our pom.xml file:

Before digging deep into the tiny details, let us first understand the authentication process at a high level.

The following diagram depicts the process of login when a user submits the username/password into the login screen and the server responds with the JWT token to be sent in all subsequent requests.

Here is how the login flow works:

The following diagram depicts the process when a user requests a protected resource and the request contains the Jwt token. The spring security extracts the token and validates the user’s identity before sending the response.

Here’s a summary of what happens when you send a request to /employees:

Let us deep dive into changes in each class and how they help the whole process. It is highly recommended first to read how Spring security works with UserDetailsService.

The SecurityConfig defines important beans such as AuthenticationManager, AuthenticationProvider, UserDetailsService and SecurityFilterChain which are essential for implementing authentication and authorization in a Spring Security application.

Let us note down a few essential details.

The AuthenticationManager coordinates and manages the authentication flow, allowing the application to delegate the authentication process to multiple providers. Each provider can have authentication mechanisms, such as username/password, social login, or multi-factor authentication.

When a user attempts to log in, the application delegates the authentication to the AuthenticationManager. The AuthenticationManager then selects the appropriate AuthenticationProvider based on the request type and forwards the request to the configured provider.

The AuthenticationProvider interface exposes only two functions:

One important interface implementation is DaoAuthenticationProvider, which retrieves user details from a UserDetailsService. The UserDetailsService interface contains a single method loadUserByUsername(), which takes a username as a parameter and returns a UserDetails object. The UserDetails object contains the user’s security-related information such as password, authorities, and account status.

The SecurityFilterChain is a crucial component in Spring Security and is responsible for applying various security filters, such as authentication and authorization filters, to incoming HTTP requests.

In the securityFilterChain() method, the HttpSecurity object is used to configure various security settings, such as CORS, CSRF protection, session management, and exception handling. It also adds a custom authentication provider and a JWT authentication filter to the filter chain.

The SpringSecurityConfigurerAdapter class has been deprecated since Spring Security 5.3, and instead, it is recommended to use the SecurityFilterChain bean to configure Spring Security. The SecurityFilterChain bean allows for more fine-grained control over the configuration of the filter chain and provides better customization options.

To implement our authentication and authorization logic, we are using three classes:

JwtTokenProvider is responsible for generating a JWT token for an authenticated user. It creates a token using the user’s username, current time, and expiration time. JwtTokenProvider also provides methods for resolving and validating a token.

JwtTokenFilter is an implementation of the OncePerRequestFilter abstract class, which ensures that the filter is only executed once per request.

JwtTokenFilter is a filter that intercepts every request and checks whether it contains a valid JWT token in the Authorization header. If a valid token is found, JwtTokenFilter retrieves the user details from the token using JwtTokenProvider, creates an Authentication object, and sets it in the security context.

In the JwtTokenFilter, if the token is not valid/exist , then the code simply continues to the next filter in the filter chain without setting any Authentication object. You may ask why we don’t return a 401 error directly if the JWT token doesn’t exist or is invalid. That’s a great question!

This behavior is intentional because not all endpoints might require authentication, and in some cases, it might be valid for the user not to be authenticated to access public APIs.

When the JwtTokenFilter sets an Authentication object in the SecurityContextHolder, Spring Security automatically handles the authentication process for subsequent requests in the same thread.

JwtAuthenticationEntryPoint is an authentication entry point that handles authentication errors. If a user tries to access a protected resource without a valid token, JwtAuthenticationEntryPoint is triggered and sends a 401 Unauthorized response.

In our implementation, the DaoAuthenticationProvider uses the UserDetailsService interface that retrieves UserDetails from the database using the UserRepository. The UserRepository is responsible for interacting with the database and retrieving user information.

Now let us understand what happens when application invokes the /login with username/password.

The AuthController is a standard REST Controller. The login method first authenticates the user using the AuthenticationManager and sets the authentication object in the security context.

Now if we try to access one of our endpoints, we will get the unauthorized message:

Send a request to /api/auth/login with the username and password in the request body, and we will get an access token.

Add the access token in the Authorization header to access now the /employees endpoint.

The following diagram depicts the login flow on the client application side.

At a high level, login and logout functionality is implemented as follows:

To implement the login form, we can create a LoginForm.vue component that contains a form with username and password fields. When the user clicks the “Login” button, the login() method is called.

The login() method sends a POST request to the /auth/login endpoint of the backend using the Axios. If the server responds with a successful login, the response will contain an accessToken property, which the login() method stores in the browser’s localStorage under the key "jwtToken".

Finally, the method redirects the user to the home page (“/”) using window.location.href.

To include a token with each request, we use Axios interceptors which intercept the request and add the token to the Authorization header as a bearer token before sending it.

we can remove the JWT token from the browser’s localStorage. This will log the user out of their session until they request a fresh token from the server.

Implementing the JWT authentication in a Vue.js and Spring Security application is a secure and efficient way to protect your users’ data and resources specially the REST APIs called by single page applications (SPA). In this article, we’ve explored the fundamental concepts behind JWT authentication, including token-based authentication.

We’ve also demonstrated how to integrate JWT authentication in the front end and the backend side, covering everything from retrieving and validating tokens and processing success/error scenarios.

Happy Learning !!

Source Code on Github